<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>列表-过滤-排序</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<div class="app">
  <h2>列表-过滤-排序</h2>
  关键词: <input type="text" name="keyword" id="keyword" v-model="keyword"/>
  <button @click="sortType=0">默认顺序</button>
  <button @click="sortType=1">年龄升序</button>
  <button @click="sortType=-1">年龄降序</button>
  <ul>
    <li v-for="(person, index) in filterPersons" :key="person.id">
      {{person.id}} - {{person.name }} - {{ person.age }} - {{person.sex}}
      <input type="text"/>
    </li>
  </ul>
  <br/>
  <button @click.prevent="addPerson">添加一个人</button>
  <br/>
  <br/>
  <button @click.prevent="updatePerson">更新马冬梅信息</button>
</div>
</body>
<script>
  //
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '.app',
    data: {
      keyword: '',
      sortType: 0, // 0: 默认排序, 1: 升序, -1: 降序
      persons: [
        {id: 1931, name: '马冬梅', age: 32, sex: '女'},
        {id: 2219, name: '周冬雨', age: 22, sex: '女'},
        {id: 7009, name: '周杰伦', age: 42, sex: '男'},
        {id: 4002, name: '温兆伦', age: 28, sex: '男'},
      ],
      filterPersons2: [],
    },
    // 列表过滤器 - 计算属性实现
    computed: {
      filterPersons() {
        return this.persons
          .filter(person => {
            return person.name.includes(this.keyword)
          })
          .sort((pre, cur) => {
            return this.sortType === 0 ? 0 :
              (this.sortType === 1 ? pre.age - cur.age :
                cur.age - pre.age)
          })

      }
    },
    methods: {
      addPerson() {
        this.persons.unshift({id: 20009, name: 'Jack', age: 99, gex: '女'})
      },
      updatePerson() {
        // 检测数组数据改变的原理  / 检测对象数据改变的原理  vue
        const person = {id: 9999, name: '马老师', age: 61, sex: '男'}
        // this.persons[0] = person
        this.persons.splice(0, 1, person)
      }
    }
  })

  // 列表过滤 - 监视实现 ( 需要定义状态接收计算结果 )
  vm.$watch('keyword', {
    immediate: true,
    handler(newValue, oldValue) {
      this.filterPersons2 = this.persons
        .filter(person => {
          return person.name.includes(newValue)
        })
        // ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆
        // 这里排序无效, 原因: keyword 没有变化时, watch 不会被调用, 状态更改不会更新页面
        .sort((pre, cur) => {
          return this.sortType * (pre.age - cur.age)
        })
    }
  })
</script>
</html>